<template>
  <el-dialog :title="!dataForm.id ? '新办会员卡' : '修改会员卡信息'"
             :close-on-click-modal="false"
             :visible.sync="visible"
             width="680px">
    <!-- :inline="true" -->
    <el-form :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             label-width="106px"
             class="center">
      <el-form-item label="会员资料"
                    prop="memberId">
        <!-- <el-input v-model="dataForm.memberId" placeholder="会员资料编号"></el-input> -->
        <el-select v-model="dataForm.memberId"
                   filterable
                   remote
                   reserve-keyword
                   placeholder="请输入关键词"
                   :remote-method="memberMethod"
                   :loading="loading"
                   style="width:380px">
          <el-option v-for="item in members"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员卡号"
                    prop="cardNumber">
        <el-input v-model="dataForm.cardNumber"
                  placeholder="会员卡号"
                  maxlength="10"
                  show-word-limit
                  style="width:380px"></el-input>
      </el-form-item>
      <el-form-item label="会员类型">
        <el-select v-model="cardtype"
                   placeholder="请选择"
                   style="width:380px">
          <el-option v-for="item in cardtyps"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="办理方式"
                    prop="method">
        <el-select v-model="handleValue"
                   placeholder="请选择"
                   style="width:380px">
          <el-option v-for="item in handlemethod"
                     :key="item.id"
                     :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="失效日期"
                    prop="expDate"
                    style="width:380px">
        <el-date-picker v-model="dataForm.expDate"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width:380px"></el-date-picker>
      </el-form-item>
      <el-form-item label="可用次数"
                    prop="usage">
        <el-input-number v-model="dataForm.usage"
                         :min="0"
                         :max="100"
                         label="可用次数"></el-input-number>
      </el-form-item>
      <el-form-item label="可用余额"
                    prop="balance">
        <el-input-number v-model="dataForm.balance"
                         controls-position="right"
                         :min="0"
                         :max="99999"></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary"
                 @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      cardtyps: [], // 会员卡类型数组
      cardtype: '',

      handlemethod: null,
      handleValue: '',

      expDate: '',
      members: [],
      loading: false,

      visible: false,
      dataForm: {
        id: 0,
        memberId: '',
        cardNumber: '',
        cardTypeId: '',
        cardTypeName: '',
        method: '',
        issueDate: '',
        expDate: '',
        usage: '',
        balance: '',
        revision: '',
        createdBy: '',
        createdTime: '',
        updatedBy: '',
        updatedTime: ''
      },
      dataRule: {
        memberId: [
          { required: true, message: '会员资料编号不能为空', trigger: 'blur' }
        ],
        cardNumber: [
          { required: true, message: '会员卡号不能为空', trigger: 'blur' }
        ],
        cardTypeId: [
          { required: true, message: '会员类型编号不能为空', trigger: 'blur' }
        ],
        cardTypeName: [
          { required: true, message: '会员类型名称不能为空', trigger: 'blur' }
        ],
        method: [
          { required: true, message: '办理方式不能为空', trigger: 'blur' }
        ],
        // issueDate: [
        //   { required: true, message: "办卡日期不能为空", trigger: "blur" },
        // ],
        expDate: [
          { required: true, message: '失效日期不能为空', trigger: 'blur' }
        ],
        usage: [
          { required: true, message: '可用次数不能为空', trigger: 'blur' }
        ],
        balance: [
          { required: true, message: '可用余额不能为空', trigger: 'blur' }
        ],
        revision: [
          { required: true, message: '乐观锁不能为空', trigger: 'blur' }
        ],
        createdBy: [
          { required: true, message: '创建人不能为空', trigger: 'blur' }
        ],
        createdTime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ],
        updatedBy: [
          { required: true, message: '更新人不能为空', trigger: 'blur' }
        ],
        updatedTime: [
          { required: true, message: '更新时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.getHandlemethod()
        this.getCardType()

        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/member/card/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.memberId = data.card.memberId
              this.dataForm.cardNumber = data.card.cardNumber
              this.dataForm.cardTypeId = data.card.cardTypeId
              this.dataForm.cardTypeName = data.card.cardTypeName
              this.dataForm.method = data.card.method
              this.dataForm.issueDate = data.card.issueDate
              this.dataForm.expDate = data.card.expDate
              this.dataForm.usage = data.card.usage
              this.dataForm.balance = data.card.balance
              this.dataForm.revision = data.card.revision
              this.dataForm.createdBy = data.card.createdBy
              this.dataForm.createdTime = data.card.createdTime
              this.dataForm.updatedBy = data.card.updatedBy
              this.dataForm.updatedTime = data.card.updatedTime
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/member/card/${!this.dataForm.id ? 'save' : 'update'}`
            ),
            method: 'post',
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              memberId: this.dataForm.memberId,
              cardNumber: this.dataForm.cardNumber,
              cardTypeId: this.dataForm.cardTypeId,
              cardTypeName: this.dataForm.cardTypeName,
              method: this.dataForm.method,
              issueDate: this.dataForm.issueDate,
              expDate: this.dataForm.expDate,
              usage: this.dataForm.usage,
              balance: this.dataForm.balance,
              revision: this.dataForm.revision,
              createdBy: this.dataForm.createdBy,
              createdTime: this.dataForm.createdTime,
              updatedBy: this.dataForm.updatedBy,
              updatedTime: this.dataForm.updatedTime
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 查询会员卡类型
    getCardType () {
      this.$http({
        url: this.$http.adornUrl(`/member/cardtype/list`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.cardtyps = data.page.list
          // console.log(this.cardtyps)
        }
      })
    },
    // 查询办理方式
    getHandlemethod () {
      this.$http({
        url: this.$http.adornUrl(`/member/handlemethod/list`),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.handlemethod = data.page.list
        }
      })
    },
    memberMethod (name) {
      this.$http({
        url: this.$http.adornUrl(`/member/member/select/${name}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.members = data.data
        }
      })
    }
  }
}
</script>
<style scoped>
.center {
  justify-content: center;
}
</style>